<template>
  <div>
    <!-- 顶部状态栏 -->
    <div class="detail_top_status_div" :class="serverData.statusClass">
      <img :src="'./static/img/'+serverData.statusImg">
      <span class="status_label">{{serverData.statusText}}</span>
    </div>
    <!-- end 顶部状态栏 -->
    <!-- 中间的div -->
    <div class="center_div">
      <template v-if="viewType!='student'">
        <flexbox class="detail_label_and_button">
          <flexbox-item>
            <h3 class="title">考核学生</h3>
          </flexbox-item>
        </flexbox>

        <div class="box_border_dashed user_box">
          <flexbox :gutter="0" align="flex-start" class="kaidan_box_top">
            <flexbox-item :span="3/11" class="user_img" align="center">
              <x-img
                :src="checkOrder.studentHeadImg"
                :default-src="'./static/img/avatar_default.png'"
              ></x-img>
            </flexbox-item>
            <flexbox-item class="stu_msg">
              <div class="user_name">{{checkOrder.studentName}}</div>
              <div class="user_class">
                <span>{{checkOrder.departmentName}}</span>
                <span>{{checkOrder.majorName}} {{checkOrder.schoolYearName}}</span>
              </div>
              <div class="user_address">
                <span>{{checkOrder.studentNo}}</span>
                <span>{{checkOrder.showAddress}}</span>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
      </template>

      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">考核单信息</h3>
        </flexbox-item>
      </flexbox>

      <div class="box_border_dashed user_box div_magin10 kaidan_info_list_my kaidan_info_detail">
        <div class="kaidan_box_top">
          <flexbox :gutter="0">
            <flexbox-item :span="5/10" class="user_group_div">
              <span class="span_status">{{ checkOrder.statusText }}</span>
              <span class="span_time">{{ checkOrder.creTimeStr}}</span>
            </flexbox-item>
            <flexbox-item :span="5/10" align="right">
              <span class="span_name">{{ checkOrder.no}}</span>
            </flexbox-item>
          </flexbox>
        </div>
        <ul class="kaidan_buttom click_to_green">
          <li class="right_li">
            <span
              class="border_radus"
              :class="checkOrder.borderClass"
            >{{ checkOrder.scoringType==1 ? '+'+checkOrder.points : '-' +checkOrder.points }}分</span>
            {{checkOrder.checkBigCateName}}-{{checkOrder.checkItemName}}  <span
                class="zuoqinag_span"
              >{{checkOrder.appropriateExplain}}</span>
          </li>
        </ul>

         <div class="upload_img_list div_magin10">
          <flexbox :gutter="0">
            <flexbox-item :span="1/4" v-for="(img , index) in serverData.checkImgList" :key="index">
              <div class="upload_box upload_img">
                <img :src="img.src" @click="showCheckBigImg(index)">
              </div>
            </flexbox-item>
          </flexbox>
        </div>
      </div>

      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">申诉描述</h3>
        </flexbox-item>
      </flexbox>

      <div class="box_border_dashed project_box div_magin10">
        <div class="shensu_miao_su">{{appealApply.appealDesc}}</div>
        <div class="upload_img_list div_magin10">
          <flexbox :gutter="0">
            <flexbox-item :span="1/4" v-for="(img , index) in serverData.imgList" :key="index">
              <div class="upload_box upload_img">
                <img :src="img.src" @click="showBigImg(index)">
              </div>
            </flexbox-item>
          </flexbox>
        </div>
      </div>
         <template  v-if="appealApply.authState==3">
        
      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">驳回描述</h3>
        </flexbox-item>
      </flexbox>

      <div class="box_border_dashed project_box div_magin10">
        <div class="shensu_miao_su refuseKeywords">{{appealApply.refuseKeywords}}</div>
        <div class="shensu_miao_su bohui">{{appealApply.refuseReason}}</div>
      </div>
        </template>

      <flexbox class="detail_label_and_button div_magin10">
        <flexbox-item>
          <h3 class="title">其他信息</h3>
        </flexbox-item>
      </flexbox>

      <div class="box_border_dashed kd_info_box div_magin10">
        <flexbox :gutter="0" class="kd_info_list">
          <flexbox-item :span="4/5">
            <span class="info_title">申诉单号：</span>
            <span>{{appealApply.no}}</span>
          </flexbox-item>
          <flexbox-item align="right">
            <input type="text" id="biao1" class="copy_input" readonly="readonly" v-model="appealApply.no">
            <span @click="doCopySelect('biao1')" class="label_copy">复制</span>
          </flexbox-item>
        </flexbox>
             <div class="kd_info_list" >
          <span class="info_title">申诉时间：</span>
          <span>{{appealApply.creTimeStr}}</span>
        </div>
        <template  v-if="appealApply.authState==2 || appealApply.authState==3">
         <div class="kd_info_list">
          <span class="info_title">审核时间：</span>
          <span>{{appealApply.stateTimeStr}}</span>
        </div>
        <div class="kd_info_list">
          <span class="info_title">审核教师：</span>
          <span>{{appealApply.authName}}</span>
          <span @click="jSCallPhone($event)"  class="info_phone">{{appealApply.authCellphone}}</span>
        </div>
        </template>
          <div class="kd_info_list" v-if="appealApply.authState==0">
          <span class="info_title">撤诉时间：</span>
          <span>{{appealApply.stateTimeStr}}</span>
        </div>
   
         <flexbox :gutter="0" class="kd_info_list">
          <flexbox-item :span="4/5">
            <span class="info_title">考核单号：</span>
            <span>{{checkOrder.no}}</span>
          </flexbox-item>
          <flexbox-item align="right">
            <input type="text" id="biao2" class="copy_input" readonly="readonly" v-model="checkOrder.no">
            <span @click="doCopySelect('biao2')" class="label_copy">复制</span>
          </flexbox-item>
        </flexbox>
        <div class="kd_info_list">
          <span class="info_title">考核时间：</span>
          <span>{{checkOrder.creTimeStr}}</span>
        </div>
        <div class="kd_info_list">
          <span class="info_title">考核教师：</span>
          <span>{{checkOrder.openOrderName}}</span>
          <span @click="jSCallPhone($event)"  class="info_phone">{{checkOrder.openOrderCellphone}}</span>
        </div>
      </div>
    </div>
    <!-- end 中间的div -->
    <!-- 底部的按钮 -->
    <div class="buttom_div" v-if="viewType=='teacher' && appealApply.authState==1">
      <flexbox :gutter="0">
        <flexbox-item>
          <div class="teacher">
            <x-button type="warn" @click.native="doShenNo()" class="dskt_btn">驳回申诉</x-button>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="teacher">
            <x-button type="success" @click.native="doShenOk()" class="dskt_btn">审核通过</x-button>
          </div>
        </flexbox-item>
      </flexbox>
    </div>

    <!-- 底部的按钮 -->
    <div class="buttom_div student" v-if="viewType=='student' && appealApply.authState==1">
        <x-button type="warn" @click.native="doCancel()" class="dskt_btn">撤消申诉</x-button>
    </div>

    <div>
      <previewer :list="serverData.checkImgList" ref="checkPreviewer"></previewer>
    </div>
    <div>
      <previewer :list="serverData.imgList" ref="previewer"></previewer>
    </div>
    <selectAppealRefuse @okEvent="selectAppealRefuseOkEvent" ref="selectAppealRefuse"></selectAppealRefuse>
    <!-- end 底部的按钮 -->
  </div>
</template>

<script>
import appealApplyService from "../../shared/service/appealApplyService";
import selectAppealRefuse from "../../components/selectAppealRefuse.vue";
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { XImg, Previewer, dateFormat } from "vux";
export default {
  components: {
    XImg,
    Previewer,
    dateFormat,
    selectAppealRefuse
  },
  data() {
    var data = {
      viewType: this.$route.query.viewType,
      appealApplyId: this.$route.query.appealApplyId,
      checkOrderId: this.$route.query.checkOrderId,
      loginUserId: this.$cookie.getUserId()
    };
    data.view = {};
    data.serverData = {
      status: "sx",
      statusText: "生效",
      statusClass: "color_green", //color_grey  color_red  color_green
      statusImg: "icon-InForce.png",
      imgList: [],
      checkImgList: []
    };
    data.appealApply = {};
    data.checkOrder = {};
    return data;
  },
  mounted() {
     weixinService.initWx(wx);
    this.doGetData(this.appealApplyId);
  },
  methods: {
    doGetData(id) {
      this.$vux.loading.show();
      appealApplyService.getAppealApply(id, { hasImg: "hasImg" }).then(res => {
        var data = res.data;
        //    @authState  ("审批状态，学生撤诉：0，待审批：1，审批通过：2，审批不通过：3")
        switch (data.authState) {
          case 0:
            this.serverData.statusText = "撤诉";
            this.serverData.statusClass = "color_grey"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon-recall.png";
            break;
          case 1:
            this.serverData.statusText = "待审核";
            this.serverData.statusClass = "color_blue"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon-wating.png";
            break;
          case 2:
            this.serverData.statusText = "审核通过";
            this.serverData.statusClass = "color_green"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon-InForce.png";
            break;
          case 3:
            this.serverData.statusText = "驳回";
            this.serverData.statusClass = "color_red"; //color_grey  color_red  color_green
            this.serverData.statusImg = "icon_no.png";
            break;
        }
        var checkPo = data.checkOrderPo;
        checkPo.borderClass =
          checkPo.scoringType == 1 ? "color_green" : "color_red";
        switch (checkPo.checkState) {
          case 0:
            checkPo.statusText = "撤回";
            checkPo.borderClass = "color_grey_white";
            break;
          case 1:
            checkPo.statusText = "生效";
            break;
          case 2:
            checkPo.statusText = "撤消";
            checkPo.borderClass = "color_grey_white";
            break;
        }

        checkPo.creTimeStr = dateFormat(
          this.$commonUtil.getDate(checkPo.creTime),
          "YYYY-MM-DD HH:mm"
        );
              checkPo.showAddress = this.$commonUtil.getUserAddress(checkPo);
        data.creTimeStr = dateFormat(
          this.$commonUtil.getDate(data.creTime),
          "YYYY-MM-DD HH:mm"
        );

        data.stateTimeStr = dateFormat(
          this.$commonUtil.getDate(data.stateTime),
          "YYYY-MM-DD HH:mm"
        );
        var imgList = [];
        for (
          let i = 0;
          data.appealImgList && i < data.appealImgList.length;
          i++
        ) {
          var element = data.appealImgList[i];
          imgList.push({ src: element.link, h: 500 });
        }
        var checkImgList = [];
        for (
          let i = 0;
          checkPo.checkImgList && i < checkPo.checkImgList.length;
          i++
        ) {
          var element = checkPo.checkImgList[i];
          checkImgList.push({ src: element.link, h: 500 });
        }
        this.appealApply = data;
        this.serverData.imgList = imgList;

        this.checkOrder = checkPo;
        this.serverData.checkImgList = checkImgList;
        this.$vux.loading.hide();
      });
    },
    doCancel() {

      var _this=this;
         this.$vux.confirm.show({
          title: '提示',
          content: '撤消申诉后不可重新发起',
          confirmText:'撤消申诉',
          onCancel () {
          },
          onConfirm () {
              //操作考核单  state 审批状态，学生撤诉：0，待审批：1，审批通过：2，审批不通过：3
              appealApplyService.doChangeStateAppealOrder(_this.appealApplyId,0, null, null).then(res => {
                  _this.$vux.toast.text("撤诉成功");
                  _this.doGetData(_this.appealApplyId);
              });
          }
      });
     
    },
    doShenOk() {
       var _this=this;
       this.$vux.confirm.show({
          title: '提示',
          content: '审核通过将撤消计分，操作不可逆！',
          confirmText:'审核通过',
          onCancel () {
          },
          onConfirm () {
            	//操作考核单  state 审批状态，学生撤诉：0，待审批：1，审批通过：2，审批不通过：3
              appealApplyService.doChangeStateAppealOrder(_this.appealApplyId,2, null, null).then(res => {
                  _this.$vux.toast.text("审核通过");
                  _this.doGetData(_this.appealApplyId);
              });
          }
      });
    },
    doShenNo() {
      this.$refs.selectAppealRefuse.show( this.appealApplyId );
    },
    selectAppealRefuseOkEvent(id, refuseKeywords, refuseReason) {
      	//操作考核单  state 审批状态，学生撤诉：0，待审批：1，审批通过：2，审批不通过：3
      appealApplyService.doChangeStateAppealOrder(this.appealApplyId,3, refuseKeywords, refuseReason).then(res => {
          this.$vux.toast.text("驳回成功");
          this.doGetData(this.appealApplyId);
      });
    },
    showCheckBigImg(index) {
      this.$refs.checkPreviewer.show(index);
    },
    showBigImg(index) {
      this.$refs.previewer.show(index);
    },
    //复制编号
    doCopySelect(domId) {
      var Url2=document.getElementById(domId);
      Url2.select(); // 选择对象
      Url2.setSelectionRange(0, Url2.value.length), document.execCommand('Copy');
      this.$vux.toast.text("已复制到剪贴板");
      return;
    },
  }
};
</script>
<style scoped>
@import "../../assets/scss/order-detail.scss";
</style>
<style scoped>
.center_div {
  padding: 8px 8px;
}
.user_box {
  padding: 15px 15px;
}
.project_box {
  padding: 15px 15px;
}
.project_box .right_li {
  padding-bottom: 5px;
}
.bohui{
    padding: 8px 0;
}
.refuseKeywords{
    color:#111;
    font-size:16px;
}
.buttom_div {
  background:rgba(242,251,254,1);
  box-sizing: border-box;
  box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.08);
  margin-top: 15px;
  padding: 15px 0;
}
.buttom_div .teacher{
  padding: 0 20px;
}
.buttom_div.student{
  padding: 0 20%;
  margin-bottom:15px;
}

.color_blue {
  background: #a9cfe2;
}
</style>
